<template>
    <van-nav-bar title="账户设置" left-arrow @click-left="$router.go(-1)" :fixed='true' />
    <div class="bigbox boxone">
        <van-cell>
            <div class="box">
                <div>
                    <img src="@/assets/images/1.jpg" alt="" class="headportrait">
                </div>
                <div class="text" v-if="id">
                    用户名: <span>{{ id }}</span>
                </div>
                <div class="text" v-else>
                    您还未登录
                    <button @click="tologin">
                        去登录
                    </button>
                </div>
            </div>
        </van-cell>
        <van-cell title="地址管理" is-link @click="toaddres" />
    </div>
    <div class="bigbox">
        <van-cell title="账户安全" is-link value="账户保障可升级" />
        <van-cell title="设置字体大小" is-link />
        <van-cell title="支付设置" is-link />
        <van-cell title="发票抬头管理" is-link value="添加增票资质" />
        <van-cell title="我的档案" is-link value="添加设备/宝宝等档案" />
        <van-cell title="通用" is-link value="清除本地缓存等" />
        <van-cell title="模式切换" is-link />
    </div>
    <div>
        <van-cell title="PLUS会员" is-link value="免费试用" />
        <van-cell title="功能实验室" is-link value="提前体验新功能" />
        <van-cell title="功能反馈" is-link />
        <van-cell title="关于枫App" is-link value="V11.4.8" />
        <van-cell title="隐私政策简要版" is-link />
        <van-cell title="个人信息收集清单" is-link />
        <van-cell title="应用权限说明" is-link />
        <van-cell title="第三方共享个人信息清单" is-link />
    </div>
    <div class="signout" v-show="token">
        <div @click="signout">
            退出登录
        </div>
    </div>
    <van-dialog v-model:show="show" title="您确定要退出吗?" show-cancel-button confirm-button-color="red" @confirm="wipedata">
    </van-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserInfoStore } from '@/stores/useInfo';


const store = useUserInfoStore()
const token =store.getUserToken
const id = store.getUserId
const show = ref(false)
const router = useRouter()

const tologin = () => {
    router.push('/login')
}
const toaddres = () => {
    router.push('/addres')
}
const signout = () => {//退出提示
    show.value = true
}
const wipedata = () => {//确认退出
    //清空用户数据  
    localStorage.setItem('userToken', '')
    localStorage.setItem('userId', '')
    store.setUserId('')
    store.setUserToken('')
    router.push('/home')
}

</script>

<style lang="scss" scoped>
button {
    background-color: red;
    color: white;
    border: none;
    border-radius: 10%;
    padding: 5px 10px;
    margin-left: 10px;
}

.boxone {
    margin-top: 50px;
}

.bigbox {
    border-radius: 20%;
    margin-bottom: 8px;
}

.box {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;

    .text {
        font-weight: 900;
        font-size: 14px;
        color: red;

        span {
            font-weight: normal;
            color: black;
        }
    }
}



.search-icon {
    font-size: 16px;
    line-height: initial;
}

.headportrait {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: 10px;
    margin-right: 10px;
}

.signout {
    line-height: 50px;
    font-size: 18px;
    text-align: center;
}
</style>